<template>
  <view class="opration-drawer-container">
    <TuiDrawer :visible="visible" mode="bottom" @close="close">
      <view class="opration-drawer">
        <view class="header">
          <text class="title">{{ dataItem?.title }}</text>
          <text
            class="ali-icon icon-guanbi1"
            style="font-size: 44rpx; color: #ccccc8; padding: 5rpx"
            @click="close"
          ></text>
        </view>
        <view class="content">
          <view class="opration-box" v-for="(item, index) in oprationData" :key="index">
            <text v-if="item.oprations.filter((f) => f.show).length" class="label">
              {{ item.lable }}
            </text>
            <view class="oprations">
              <view
                class="opration-item"
                v-for="(opration, index) in item.oprations.filter((f) => f.show)"
                :key="index"
                @click="opration.fn()"
              >
                <template>
                  <text class="ali-icon" :class="opration.icon" style="color: #2878ff">
                    {{ !opration.icon ? opration.iconCode : '' }}
                  </text>
                  <text class="opration-text">{{ opration.text }}</text>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </TuiDrawer>
    <ShowModal
      :title="modalObj.title"
      v-model:model-value="modalObj.visible"
      :cancel-color="modalObj.cancelColor"
      :cancel-text="modalObj.cancelText"
      :confirm-color="modalObj.confirmColor"
      :confirm-text="modalObj.confirmText"
      :confirmAutoClose="modalObj.confirmAutoClose"
      @confirm="modalObj.confirmFn"
      :z-index="999999"
    >
      <template #content>
        <text :style="{ color: modalObj.contentColor }">{{ modalObj.content }}</text>
      </template>
    </ShowModal>
  </view>
</template>
<script setup lang="ts">
  import type { IFormTemplate } from '@/api/serviceForm/types';
  import TuiDrawer from '@/components/TuiDrawer/index.vue';
  import { computed, inject, reactive, ref, type Ref } from 'vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { ServiceFormStatusEnum } from '@/enums/serviceFormEnum';
  import {
    deleteServiceTicketForm,
    serviceTicketFormCopy,
    serviceTicketFormOpenSet,
  } from '@/api/serviceForm';
  import { Toast } from '@/utils';
  import { navigateTo } from '@/router';
  import type { IBusinessOpportunityList } from '@/api/businessOpportunities/type';
  import { boInfoCopy, closeBo, delBo, publishBo } from '@/api/businessOpportunities';
  import { BoStatusEnum, ReleaseTypeEnum } from '@/enums/businessOpportunitiesEnum';
import { useUserStore } from '@/store/modules/user';

  const emits = defineEmits(['ok']);
  // const openDrawer = inject<Ref<boolean>>('openDrawer');

  const visible = ref(false);
  const dataItem = ref<IBusinessOpportunityList>();

  const open = (currItem: IBusinessOpportunityList) => {
    visible.value = true;
    dataItem.value = currItem;
    // openDrawer!.value = true;
  };
  const close = () => {
    visible.value = false;
    // openDrawer!.value = false;
  };

  const modalObj = reactive({
    visible: false,
    title: '开放填写',
    content: '此表单暂未开放填写，确认开放填写吗？',
    contentColor: '#999996',
    cancelText: '取消',
    cancelColor: '#999996',
    confirmText: '开发填写',
    confirmColor: '#2878FF',
    confirmAutoClose: true,
    confirmFn: () => {},
  });

  const oprationData = reactive([
    {
      lable: '管理供需',
      oprations: [
        {
          show: computed(() => dataItem.value?.boStatus === BoStatusEnum.Active),
          iconCode: '\ue604',
          text: '关闭供需',
          fn: async () => {
            await closeBo(dataItem.value!.id);
            emits('ok');
            close();
            Toast('关闭成功');
          },
        },
        {
          show: computed(
            () =>
              dataItem.value?.boStatus === BoStatusEnum.Draft ||
              dataItem.value?.boStatus === BoStatusEnum.ReviewFailed,
          ),
          iconCode: '\ue6a8',
          text: '发布供需',
          fn: async () => {
            uni.showModal({
              title: '申请发布供需',
              content: '确定要申请发布供需吗？',
              confirmText: '申请发布',
              cancelText: '取消',
              confirmColor: '#ff5c5c',
              showCancel: true,
              success: async (res) => {
                if (res.confirm) {
                  const useUser = useUserStore();
                  await useUser.validatePerfectionInfo();
                  await publishBo(dataItem.value!.id, ReleaseTypeEnum.member);
                  Toast('已发布');
                  close();
                  emits('ok');
                }
              },
            });
          },
        },
        {
          show: computed(
            () =>
              dataItem.value?.boStatus === BoStatusEnum.Active ||
              dataItem.value?.boStatus === BoStatusEnum.Draft ||
              dataItem.value?.boStatus === BoStatusEnum.ReviewFailed,
          ),
          iconCode: '\ue687',
          text: '编辑',
          fn: () => {
            navigateTo({
              name: 'releaseBusinessOpportunities',
              options: {
                id: dataItem.value?.id,
                releaseType: ReleaseTypeEnum.member,
                success: () => emits('ok'),
              },
            });
            close();
          },
        },
        {
          show: computed(() => dataItem.value?.boStatus !== BoStatusEnum.Draft),
          icon: 'icon-fuzhi',
          text: '复制',
          fn: () => {
            boInfoCopy(dataItem.value?.id as number).then((res) => {
              if (res.id) {
                navigateTo({
                  name: 'releaseBusinessOpportunities',
                  options: {
                    id: res.id,
                    releaseType: ReleaseTypeEnum.member,
                    success: () => emits('ok'),
                  },
                });
              }
            });
          },
        },
        {
          show: computed(() => dataItem.value?.boStatus !== BoStatusEnum.Reviewing),
          iconCode: '\ue686',
          text: '删除',
          fn: () => {
            modalObj.content =
              '确定要删除本供需吗？删除后将无法再查看供需详情以及供需数据，但可通过意向管理页面查看已有的意向记录。';
            modalObj.contentColor = '#EA5E0E';
            modalObj.title = '删除供需';
            modalObj.confirmText = '删除供需';
            modalObj.confirmColor = '#EA5E0E';
            modalObj.visible = true;
            modalObj.confirmFn = async () => {
              await delBo(dataItem.value!.id);
              Toast('删除成功');
              emits('ok');
              close();
            };
          },
        },
      ],
    },
    {
      lable: '其它',
      oprations: [
        {
          show: computed(
            () =>
              dataItem.value?.boStatus === BoStatusEnum.Active ||
              dataItem.value?.boStatus === BoStatusEnum.Closed ||
              dataItem.value?.boStatus === BoStatusEnum.Expired,
          ),
          iconCode: '\ue6a4',
          text: '意向列表',
          fn: async () => {
            navigateTo({
              name: 'intentionCooperation',
              options: {
                id: dataItem.value?.id!,
                type: 'list',
                boType: dataItem.value?.boType!,
                title: dataItem.value?.title!,
              },
            });
          },
        },
        {
          show: computed(
            () =>
              dataItem.value?.boStatus === BoStatusEnum.Active ||
              dataItem.value?.boStatus === BoStatusEnum.Closed ||
              dataItem.value?.boStatus === BoStatusEnum.Expired,
          ),
          iconCode: '\ue6a6',
          text: '意向统计',
          fn: async () => {
            navigateTo({
              name: 'intentionCooperation',
              options: {
                id: dataItem.value?.id!,
                boType: dataItem.value?.boType!,
                title: dataItem.value?.title!,
                type: 'statistics',
              },
            });
          },
        },
        {
          show: computed(
            () =>
              dataItem.value?.boStatus === BoStatusEnum.Active ||
              dataItem.value?.boStatus === BoStatusEnum.Closed ||
              dataItem.value?.boStatus === BoStatusEnum.Expired,
          ),
          iconCode: '\ue69b',
          text: '答疑管理',
          fn: async () => {
            navigateTo({
              name: 'singleQuestionManage',
              options: {
                id: dataItem.value?.id!,
                boType: dataItem.value?.boType!,
                title: dataItem.value?.title!,
              },
            });
          },
        },
      ],
    },
  ]);

  defineExpose({
    open,
  });
</script>
<style lang="scss" scoped>
  .opration-drawer-container {
    .opration-drawer {
      .header {
        height: 96rpx;
        box-shadow: 0px -1px 0px 0px #ebedf0 inset;
        padding: 0rpx 24rpx 0rpx 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 32rpx;
          line-height: 44rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .content {
        background-color: #f7f8fa;
        padding-bottom: 400rpx;
        height: 100%;
        .opration-box {
          padding: 16rpx 32rpx;
          .label {
            color: #999996;
            font-size: 28rpx;
            line-height: 40rpx;
          }
          .oprations {
            display: flex;
            gap: 16rpx;
            margin-top: 16rpx;
            .opration-item {
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 16rpx;
              width: 160rpx;
              height: 160rpx;
              background-color: white;
              border-radius: 16rpx;
              button::after {
                border: 0;
              }
              .ali-icon {
                font-size: 56rpx;
              }
              .opration-text {
                font-size: 28rpx;
                line-height: 40rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
